<template>
    <div class="user_index" ref="userRef">
        <div class="item" v-if="state.routeData.id == ''">
            <div class="label between" style="width: 90%;">
                <div>平台账号</div>
                <div class="flex" style="cursor: pointer;">
                    <img src="@/assets/home/add_hover.png" style="width: 14px;height: 14px;margin-right: 2px;" alt="">
                    <div style="color: #3569fd;left: -10px" @click="clickAdd('plantUser')">添加</div>
                </div>
            </div>
            <div class="value">
                <div class="user_index_list">
                    <div class="user_index_item flex" v-for="(item, index) in state.formData.user.plantUser"
                        :key="index" style="width: calc( 90% + 60px ) ;">
                        <div class="content">
                            <div class="content_item flex">
                                <div class="content_item_label">平台</div>
                                <div class="content_item_value">
                                    <app-select-plat :width="`calc(100vw - 820px)`" :itemData="item" :plantUserIndex="index"
                                        :options="state.map.bc_types" @changemap="store.getPlatforms()" />
                                </div>
                            </div>
                            <div class="content_item flex">
                                <div class="content_item_label">名称</div>
                                <div class="content_item_value">
                                    <el-input v-model="item.name" style="width: 100%" placeholder="给账号起名" />
                                </div>
                            </div>
                            <div class="content_item flex">
                                <div class="content_item_label">账号</div>
                                <div class="content_item_value">
                                    <el-input v-model="item.username" style="width: 100%" placeholder="账号" />
                                </div>
                            </div>
                            <div class="content_item flex">
                                <div class="content_item_label">密码</div>
                                <div class="content_item_value">
                                    <el-input v-model="item.password" style="width: 100%" placeholder="密码" />
                                </div>
                            </div>
                        </div>
                        <div class="close_icon">
                            <div class="icon_img" @click="clickClose('plantUser', index)"></div>
                            <!-- <img src="@/assets/home/del-default2.png" @click="clickClose('plantUser',index)" style="width: 14px;height: 14px;cursor: pointer;"
                                alt=""> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="item" v-if="state.routeData.id == ''">
            <div class="label between" style="width: 90%;">
                <div>Cookie</div>
                <div class="flex" style="cursor: pointer;" v-if="state.formData.user.cookies.length < 2">
                    <img src="@/assets/home/add_hover.png" style="width: 14px;height: 14px;margin-right: 2px;" alt="">
                    <div style="color: #3569fd;left: -10px" @click="clickAdd('cookies')">添加</div>
                </div>
            </div>
            <div class="value">
                <div class="user_index_list">
                    <div class="user_index_item flex" v-for="(item, index) in state.formData.user.cookies" :key="index"
                        style="width: calc( 90% + 60px ) ;">
                        <div class="content">
                            <div class="content_item flex">
                                <div class="content_item_value">
                                    <el-input v-model="item.cookie" :rows="3" type="textarea" style="width: 100%"
                                        :placeholder="index == 0 ? '支持JSON、Netscape格式的Cookie' : '两份Cookie的格式请保持一致'" />
                                </div>
                            </div>
                        </div>
                        <div class="close_icon">
                            <div class="icon_img" @click="clickClose('cookies', index)"
                                v-if="state.formData.user.cookies.length > 1"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="item">
            <div class="label between" style="width: 90%;">
                <div>打开指定网址</div>
                <div class="flex" style="cursor: pointer;">
                    <img src="@/assets/home/add_hover.png" style="width: 14px;height: 14px;margin-right: 2px;" alt="">
                    <div style="color: #3569fd;left: -10px" @click="clickAdd('urls')">添加</div>
                </div>
            </div>
            <div class="value">
                <div class="user_index_list">
                    <div class="user_index_item flex" v-for="(item, index) in state.formData.user.urls" :key="index"
                        style="width: calc( 90% + 60px ) ;">
                        <div class="content">
                            <div class="content_item flex">
                                <div class="content_item_value">
                                    <el-input v-model="item.url" style="width: 100%"
                                        placeholder="请使用http://或https://或chrome-extension://开头" />
                                </div>
                            </div>
                        </div>
                        <div class="close_icon">
                            <div class="icon_img" @click="clickClose('urls', index)"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const { store, state } = inject('storejs')
const userRef = ref(null)

const showSelectPlat = ref(false)


const clickAdd = (value) => {
    if (value == 'plantUser') {
        state.formData.user.plantUser.push({
            // 平台
            bc_type: '',
            // 名称
            name: '',
            // 账号
            username: '',
            // 密码
            password: ''
        })
    } else if (value == 'cookies') {
        state.formData.user.cookies.push({
            cookie: ''
        })
    } else if (value == 'urls') {
        state.formData.user.urls.push({
            url: ''
        })
    }
}

const clickClose = (value, index) => {
    if (value == 'plantUser') {
        state.formData.user.plantUser.splice(index, 1);
    } else if (value == 'cookies') {
        state.formData.user.cookies.splice(index, 1);
    } else if (value == 'urls') {
        state.formData.user.urls.splice(index, 1);
    }
}

const handleClose = () => {
    showSelectPlat.value = false
}

const savePlat = (row) => {
    state.formData.user.plantUser[row.index].bc_type_id = row.data.id
    state.formData.user.plantUser[row.index].value = row.data
    showSelectPlat.value = false
}
onMounted(() => {
})
</script>

<style lang="scss" scoped>
.user_index {
    width: 100%;
    padding: 8px 16px 0 16px;
}

.item {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;

    .label {
        height: 30px;
        padding-bottom: 8px;
        color: #4e5969;
        font-size: 14px;
    }

    .value {
        .text {
            margin-top: 8px;
            color: #00000073;
            font-size: 14px;
        }

        .text2 {
            margin-top: 8px;
            color: #00000073;
            font-size: 12px;
        }

    }

}

.between {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    img {
        width: 18px;
        height: 18px;
        margin-right: 8px;
    }
}

.flex {
    display: flex;
    align-items: center;
}

.column {
    display: flex;
    flex-direction: column;
}

.checkip_text {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    font-size: 14px;
}

.content {
    flex: 1;
    margin-top: 8px;

    .content_item {
        margin-bottom: 8px;

        .content_item_label {
            height: 100%;
            width: 50px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-right: 8px;
            color: #4e5969;
            font-size: 14px;
        }

        .content_item_value {
            flex: 1;
        }
    }

}

.close_icon {
    width: 60px;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 8px;

    .icon_img {
        cursor: pointer;
        width: 18px;
        height: 18px;
        background: url('@/assets/home/del-default.png');
        background-size: cover;
    }

    .icon_img:hover {
        cursor: pointer;
        width: 18px;
        height: 18px;
        background: url('@/assets/home/del-default_hover.png');
        background-size: cover;
    }
}

.select_img {
    margin-left: 8px;
    width: 14px;
    height: 14px;
    background: url('@/assets/home/down.png');
    background-size: cover;
}

.text1 {
    color: #bfbfbf;
}
</style>

<style>
.app-button2-active {
    border: 1px solid #3569fd !important;
    color: #3569fd !important;
}


.user_agent_input .el-input-group__append {
    background-color: #fff;
}
</style>